<template>
  <Modal v-model="showItPop" width="31" :closable="false" class-name="vertical-center-modal">
    <div slot="header"></div>
    <div class="content-sty" id="posterImage">
      <img src="../images/invite_poster.png" class="poster-bg" alt="">
      <div class="invite-code">{{ inviteCode }}</div>
    </div>
    <div slot="footer" class="handle-sty">
      <div class="save-btn" @click="saveMet()">Click & Download</div>
    </div>
  </Modal>
</template>
<script>
import { mapState } from "vuex";
import html2canvas from '@/common/html2canvas';
export default {
  data() {
    return {
      showItPop: false,
      inviteCode: ''
    }
  },
  computed: {
    ...mapState({
      userCurrency: state => state.user.userCurrency,
      userInfo: state => state.user.userInfo
    })
  },
  methods: {
    open(inviteCode) {
      this.inviteCode = inviteCode;
      this.showItPop = true;
    },
    saveMet() {
      setTimeout(() => {
        // 获取要截图的元素
        const element = document.querySelector("#posterImage");
        // 获取设备的像素比
        const scale = window.devicePixelRatio || 1;
        // 设置 html2canvas 的配置选项
        const options = {
          // 设置缩放比例，提高分辨率
          scale: scale * 2,
          // 将 backgroundColor 设置为 null
          backgroundColor: null,
          // 允许跨域图像
          useCORS: true
        };
        // 设置 html2canvas 的配置选项，将 backgroundColor 设置为 null
        html2canvas(element, options, { backgroundColor: null }).then((canvas) => {
          const dataURL = canvas.toDataURL('image/png');
          // 创建一个临时的 a 标签用于触发下载
          const link = document.createElement('a');
          link.href = dataURL;
          link.download = 'image.png';
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        });
      }, 500)
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.ivu-modal-content) {
  background-color: transparent;
  box-shadow: none;
  border-radius: 12px;

  .ivu-modal-header {
    border: none;
    padding: 0;
  }

  .ivu-modal-body {
    padding: 0;
  }

  .ivu-modal-footer {
    border: none;
    padding: 0;
  }
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .content-sty {
    width: 576px;
    height: 867.6px;
    text-align: center;
    position: relative;

    .invite-code {
      font-weight: 600;
      font-size: 30px;
      color: #FFF24E;
      line-height: 35px;
      position: absolute;
      left: 180px;
      top: 454px;
    }

    .poster-bg {
      width: 576px;
      height: 867.6px;
      margin-left: 20px;
    }
  }

  .handle-sty {
    text-align: center;

    .save-btn {
      display: inline-block;
      padding: 16px 32px;
      border-radius: 35px;
      background: rgba(0, 0, 0, 0.6);
      font-weight: 400;
      font-size: 24px;
      color: #FFFFFF;
      line-height: 28px;
      cursor: pointer;
      margin-top: 32px;
    }
  }
}
</style>
